<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import { getRentInfo, getEnergyAddrList, getaccountresource } from "@/api";
import { toStringMatch } from "@/utils/format";
import { AppModule } from "@/store/modules/app";

export default defineComponent({
    setup() {
        const activeNames = ref(["1"]);
        const rentInfo = ref({});
        const energy = ref(0);
        const energy2 = ref(0);
        const tranNumber = computed(() => {
            return (num, point) => {
                let numStr = num.toString().split(".")[0];
                if (numStr.length < 6) {
                    // 判断数字有多长,如果小于6,,表示10万以内的数字,让其直接显示
                    return toStringMatch(num, point);
                } else if (numStr.length >= 6 && numStr.length <= 8) {
                    // 如果数字大于6位,小于8位,让其数字后面加单位万
                    let decimal = numStr.substring(
                        numStr.length - 4,
                        numStr.length - 4 + point
                    );
                    // 由千位,百位组成的一个数字
                    if (["zh", "hk"].indexOf(AppModule.language) !== -1) {
                        return (
                            parseFloat(parseInt(num / 10000) + "." + decimal) +
                            "万"
                        );
                    } else {
                        return (
                            toStringMatch(
                                parseFloat(
                                    parseInt(num / 10000) + "." + decimal
                                ) / 100,
                                6
                            ) + "m"
                        );
                    }
                } else if (numStr.length > 8) {
                    // 如果数字大于8位,让其数字后面加单位亿
                    let decimal = numStr.substring(
                        numStr.length - 8,
                        numStr.length - 8 + point
                    );
                    if (["zh", "hk"].indexOf(AppModule.language) !== -1) {
                        return (
                            parseFloat(
                                parseInt(num / 100000000) + "." + decimal
                            ) + "亿"
                        );
                    } else {
                        return (
                            toStringMatch(
                                parseFloat(
                                    parseInt(num / 100000000) + "." + decimal
                                ) / 10,
                                6
                            ) + "b"
                        );
                    }
                }
                return toStringMatch(num);
            };
        });
        const targetElement1 = ref();
        const targetElement2 = ref();
        const handleScroll = () => {
            const elementF = (id) => {
                const element = id;
                const rect = element.value.getBoundingClientRect();
                if (rect.top < window.innerHeight) {
                    element.value.classList.add("leftScroll");
                } else {
                    element.value.classList.remove("leftScroll");
                }
            };
            elementF(targetElement1);
            elementF(targetElement2);
        };

        const particlesOptions = ref({
            background: {
                color: {},
            },
            fullScreen: {
                enable: false,
            },
            opacity: {
                value: 1,
                random: true,
            },
            fpsLimit: 120,
            interactivity: {
                events: {
                    onClick: {
                        enable: true,
                        mode: "push",
                    },
                    onHover: {
                        enable: true,
                        mode: "repulse",
                    },
                },
                modes: {
                    bubble: {
                        distance: 400,
                        duration: 2,
                        opacity: 0.8,
                        size: 40,
                    },
                    push: {
                        quantity: 4,
                    },
                    repulse: {
                        distance: 200,
                        duration: 0.4,
                    },
                },
            },
            particles: {
                color: {
                    value: "random",
                    animation: {
                        enable: true,
                        speed: 20,
                        sync: true,
                    },
                },
                links: {
                    color: "random",
                    distance: 150,
                    enable: true,
                    opacity: 0.5,
                    width: 1,
                },
                move: {
                    direction: "none",
                    enable: true,
                    outModes: "bounce",
                    random: false,
                    speed: 1,
                    straight: false,
                },
                number: {
                    density: {
                        enable: true,
                    },
                    value: 200,
                },
                opacity: {
                    value: 0.5,
                },
                shape: {
                    type: "circle",
                },
                size: {
                    value: { min: 1, max: 5 },
                },
            },
            detectRetina: true,
        });

        const isMobile = () => {
            const userAgent =
                navigator.userAgent || navigator.vendor || window.opera;
            // 通常手机浏览器的user agent中包含以下字符串中的至少一个
            return /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
                userAgent.toLowerCase()
            );
        };
        onMounted(() => {
            // window.addEventListener("scroll", handleScroll);
            getRentInfo().then((res) => {
                rentInfo.value = res.data.data;
            });
            energy.value = 0;
            energy2.value = 0;
            let num1 = 0;
            let num2 = 0;
            getEnergyAddrList().then(async (res) => {
                if (res.data.code == 20) {
                    for (
                        let index = 0;
                        index < res.data.data.EnergyAddrList.length;
                        index++
                    ) {
                        const element = res.data.data.EnergyAddrList[index];
                        num1 = num1 + element.TotalEnergy;
                        const resource = await getaccountresource({
                            address: element.Address,
                            visible: true,
                        });
                        num2 =
                            num2 +
                            ((resource.data.EnergyLimit || 0) -
                                (resource.data.EnergyUsed || 0));
                        console.log(num2, "------------");
                    }
                }
                energy.value = num1;
                energy2.value = num2;
            });
            if (isMobile()) {
                setTimeout(() => {
                    activeList.value.push(1);
                }, 200);
            }
        });
        const active = ref(0);
        const activeList = ref([]);
        const changeTabs = (id) => {
            activeList.value.push(id);
        };
        return {
            activeNames,
            rentInfo,
            energy,
            energy2,
            tranNumber,
            targetElement1,
            targetElement2,
            active,
            changeTabs,
            activeList,
            particlesOptions,
        };
    },
});
</script>

<template>
    <div class="page">
        <div class="banner-warp">
            <vue-particles id="tsparticles" :options="particlesOptions" />
            <div class="info">
                <div class="title"><span>TronBank.Pro</span></div>
                <div class="namezh">{{ $t("layout.text11") }}</div>
                <div class="text">{{ $t("layout.text12") }}</div>
            </div>
            <div class="banner"></div>
            <div class="main">
                <div class="total">
                    <div class="cell">
                        <div>
                            <div class="label">
                                {{ $t("layout.page3") }}
                            </div>

                            <div class="value">
                                {{ tranNumber(energy2, 2) }}
                            </div>
                        </div>
                    </div>
                    <div class="cell">
                        <div>
                            <div class="label">
                                {{ $t("layout.page4") }}
                            </div>
                            <div class="value">
                                {{ tranNumber(rentInfo.SumEnergy || 0, 2) }}
                            </div>
                        </div>
                    </div>
                    <!-- <div class="cell">
                        <div>
                            <div class="label">
                                {{$t("layout.page5")}}
                            </div>
                            <div class="value">
                                110{{$t("layout.Billion")}}
                            </div>
                        </div>
                    </div> -->
                    <div class="cell">
                        <div>
                            <div class="label">
                                {{ $t("layout.text13") }}TRX
                            </div>
                            <div class="value">
                                {{ tranNumber(rentInfo.SumRentFee || 0, 2) }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-tabs
            v-model:active="active"
            scrollspy
            sticky
            @change="changeTabs"
            offset-top="80vh"
            class="animateWRAP"
        >
            <van-tab title=" aaaa"></van-tab>
            <van-tab title=" aaaa">
                <div class="Energyleasing">
                    <div
                        class="toleration"
                        :class="{ animate: activeList.indexOf(1) !== -1 }"
                    >
                        <div class="title">
                            <span>{{ $t("layout.text14") }}</span>
                        </div>
                        <div class="main blcok">
                            <div class="icon animateRight">
                                <img src="@/assets/image/logo.png" alt="" />
                            </div>
                            <div class="info animateLeft">
                                <div class="label">
                                    <div class="cell">
                                        {{ $t("layout.text15") }}
                                    </div>
                                    <div class="cell">
                                        {{ $t("layout.text16") }}
                                    </div>
                                    <div class="cell">
                                        {{ $t("layout.text17") }}
                                    </div>
                                </div>
                                <div class="text">
                                    {{ $t("layout.text19") }}
                                </div>
                                <van-button
                                    round
                                    block
                                    type="primary"
                                    to="/index"
                                >
                                    {{ $t("layout.text18") }}
                                </van-button>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title=" 22">
                <div class="Energyleasing Energyleasing2">
                    <div
                        class="toleration"
                        :class="{ animate: activeList.indexOf(2) !== -1 }"
                    >
                        <div class="title main">
                            <span>{{ $t("layout.text20") }}</span>
                        </div>
                        <div class="main blcok">
                            <div class="icon animateLeft">
                                <img src="@/assets/image/image6.png" alt="" />
                            </div>
                            <div class="info animateRight">
                                <div class="label">
                                    <div class="cell">
                                        {{ $t("layout.text21") }}
                                    </div>
                                    <div class="cell">
                                        {{ $t("layout.text22") }}
                                    </div>
                                    <div class="cell">
                                        {{ $t("layout.text23") }}
                                    </div>
                                </div>
                                <div class="text">
                                    <span>{{ $t("layout.text25") }}</span>
                                </div>
                                <van-button
                                    round
                                    block
                                    type="primary"
                                    to="/stake"
                                >
                                    {{ $t("layout.text24") }}
                                </van-button>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title=" 33">
                <div
                    class="How toleration"
                    :class="{ animate: activeList.indexOf(3) !== -1 }"
                >
                    <div class="main">
                        <div class="title"><span>How to participate</span></div>
                        <div class="row">
                            <div class="cell animateBottom animateBottom1">
                                <img
                                    src="@/assets/image/_img10.png"
                                    alt=""
                                    srcset=""
                                />
                                <div class="info">
                                    <div class="label">Step 1</div>
                                    <div class="text">Connect your wallet</div>
                                </div>
                            </div>
                            <div class="cell animateBottom animateBottom1">
                                <img
                                    src="@/assets/image/_img11.png"
                                    alt=""
                                    srcset=""
                                />
                                <div class="info">
                                    <div class="label">Step 2</div>
                                    <div class="text">
                                        Deposit your TRX assets
                                    </div>
                                </div>
                            </div>
                            <div class="cell animateBottom animateBottom2">
                                <img
                                    src="@/assets/image/_img12.png"
                                    alt=""
                                    srcset=""
                                />
                                <div class="info">
                                    <div class="label">Step 3</div>
                                    <div class="text">
                                        Choose your favorite strategy and stake
                                    </div>
                                </div>
                            </div>
                            <div class="cell animateBottom animateBottom2">
                                <img
                                    src="@/assets/image/_img13.png"
                                    alt=""
                                    srcset=""
                                />
                                <div class="info">
                                    <div class="label">Step 4</div>
                                    <div class="text">
                                        Earn TBK platform token as income
                                    </div>
                                </div>
                            </div>
                            <div class="cell animateBottom animateBottom3">
                                <img
                                    src="@/assets/image/_img14.png"
                                    alt=""
                                    srcset=""
                                />
                                <div class="info">
                                    <div class="label">Step 5</div>
                                    <div class="text">
                                        Share with friends to earn more
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="44 ">
                <div
                    class="tbk toleration"
                    :class="{ animate: activeList.indexOf(4) !== -1 }"
                >
                    <div class="main">
                        <div class="title">
                            <span>{{ $t("layout.text38") }}</span>
                        </div>
                        <div class="text text2">
                            {{ $t("layout.text39") }}
                        </div>
                        <div class="imageBox">
                            <div class="image">
                                <div class="p">
                                    {{ $t("layout.text40") }}
                                </div>
                                <div class="p">
                                    {{ $t("layout.text41") }}
                                </div>
                                <div class="p">
                                    {{ $t("layout.text42") }}
                                </div>
                                <div class="p">
                                    {{ $t("layout.text43") }}
                                </div>
                                <div class="p">
                                    {{ $t("layout.text44") }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title=" 55">
                <div
                    class="tbkModel toleration"
                    :class="{ animate: activeList.indexOf(5) !== -1 }"
                >
                    <div class="main">
                        <div class="title">
                            <span>{{ $t("layout.text26") }}</span>
                        </div>
                        <div class="blcok">
                            <div class="image animateLeft">
                                <p>{{ $t("layout.text27") }}<br /></p>
                                <p>
                                    {{ $t("layout.text29") }}<br />
                                    <span> ({{ $t("layout.text30") }})</span>
                                </p>
                                <p>
                                    {{ $t("layout.text31") }}<br />
                                    <span>({{ $t("layout.text32") }})</span>
                                </p>
                                <p>{{ $t("layout.text28") }}<br /></p>
                                <p>{{ $t("layout.text34") }}<br /></p>
                            </div>
                            <div class="text animateRight">
                                <span>{{ $t("layout.page12") }}</span>
                                <br />
                                <br />
                                <span> {{ $t("layout.text37") }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab title=" 66">
                <div
                    class="map"
                    :class="{ animate: activeList.indexOf(6) !== -1 }"
                >
                    <div class="main">
                        <div class="title">
                            <span>{{ $t("layout.text45") }}</span>
                        </div>
                        <ul>
                            <li>
                                <div class="label animateLeft-0">
                                    {{ $t("layout.text46") }}
                                </div>
                                <div class="text animateLeft-0 animateLeft-1">
                                    <p>{{ $t("layout.text47") }}</p>
                                    <p>{{ $t("layout.text48") }}</p>
                                    <p>{{ $t("layout.text49") }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="label animateLeft-0">
                                    {{ $t("layout.text50") }}
                                </div>
                                <div class="text animateLeft-0 animateLeft-2">
                                    <p>{{ $t("layout.text51") }}</p>
                                    <p>{{ $t("layout.text52") }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="label animateLeft-0">
                                    {{ $t("layout.text53") }}
                                </div>
                                <div class="text animateLeft-0 animateLeft-3">
                                    <p>{{ $t("layout.text54") }}</p>
                                    <p>{{ $t("layout.text55") }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="label animateLeft-0">
                                    {{ $t("layout.text56") }}
                                </div>
                                <div class="text animateLeft-0 animateLeft-4">
                                    <p>{{ $t("layout.text57") }}</p>
                                    <p>{{ $t("layout.text58") }}</p>
                                </div>
                            </li>
                            <li>
                                <div class="label animateLeft-0">
                                    {{ $t("layout.text59") }}
                                </div>
                                <div class="text animateLeft-0 animateLeft-5">
                                    <p>{{ $t("layout.text60") }}</p>
                                    <p>{{ $t("layout.text61") }}</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </van-tab>
            <van-tab title=" 777">
                <div
                    class="Partners"
                    :class="{ animate: activeList.indexOf(7) !== -1 }"
                >
                    <div class="main">
                        <div class="title">
                            <span>{{ $t("layout.page61") }}</span>
                        </div>
                        <!-- <ul class="animateBottom animateBottom1"> -->
                        <ul>
                            <li>
                                <img
                                    src="@/assets/image/1.png"
                                    alt=""
                                    srcset=""
                                />
                            </li>
                            <li>
                                <img
                                    src="@/assets/image/2.png"
                                    alt=""
                                    srcset=""
                                />
                            </li>
                            <li>
                                <img
                                    src="@/assets/image/3.png"
                                    alt=""
                                    srcset=""
                                />
                            </li>
                            <li>
                                <img
                                    src="@/assets/image/4.png"
                                    alt=""
                                    srcset=""
                                />
                            </li>
                            <li>
                                <img
                                    src="@/assets/image/5.png"
                                    alt=""
                                    srcset=""
                                />
                            </li>
                            <li>
                                <img
                                    src="@/assets/image/6.png"
                                    alt=""
                                    srcset=""
                                />
                            </li>
                        </ul>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>

    <v-footers></v-footers>
</template>

<style lang="less" scoped>
#tsparticles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.animateWRAP {
    &:deep(.van-tabs__wrap) {
        display: none;
    }
}
.toleration {
    opacity: 0;
    transition: all 2s;
    .animateLeft {
        transform: translateX(100px);
        transition: all 1s;
    }
    .animateRight {
        transition: all 1s;
        transform: translateX(-100px);
    }
    .animateBottom1 {
        opacity: 0;
        transition: all 1.5s;
        transform: translateY(300px);
    }
    .animateBottom2 {
        opacity: 0;
        transition: all 1s ease-in-out 0.25s;
        transform: translateY(300px);
    }
    .animateBottom3 {
        opacity: 0;
        transition: all 1s ease-in-out 0.5s;
        transform: translateY(300px);
    }
}
.animateLeft-0 {
    opacity: 0;
    transition: all 1s;
}
.animateLeft-1 {
    transform: translateX(100px);
    transition: all 1s;
}
.animateLeft-2 {
    transform: translateX(100px);
    transition: all 1s ease-in-out 0.2s;
}
.animateLeft-3 {
    transform: translateX(100px);
    transition: all 1s ease-in-out 0.4s;
}
.animateLeft-4 {
    transform: translateX(100px);
    transition: all 1s ease-in-out 0.6s;
}
.animateLeft-5 {
    transform: translateX(100px);
    transition: all 1s ease-in-out 0.8s;
}
.animate {
    opacity: 1;
    .animateLeft {
        transform: translateX(0);
    }
    .animateRight {
        transform: translateX(0);
    }
    .animateBottom {
        opacity: 1;
        transform: translateY(0);
    }
    .animateLeft-0 {
        opacity: 1;
        transform: translateX(0);
    }
}
.page {
    position: relative;
    padding-bottom: 40px;
    overflow: hidden;
    z-index: 999;
    .banner-warp {
        padding: 100px 0 60px 0;
        position: relative;
        .info {
            text-align: center;
            padding-bottom: 40px;
            .title {
                span {
                    font-size: 100px;
                }
            }
            .namezh {
                padding: 17px 0 55px 0;
                font-weight: 500;
                font-size: 30px;
                color: #0057fd;
            }
            .text {
                font-weight: 500;
                font-size: 30px;
                color: #ffffff;
            }
        }
        .banner {
            position: relative;
            width: 1136px;
            height: 283px;
            margin: auto;
            text-align: center;
            background: url("@/assets/image/image7.png") no-repeat;
            background-position: center;
            background-size: 1136px 283px;
        }
        @media (max-width: 680px) {
            & {
                padding: 80px 0 30px 0;
                .info {
                    padding-bottom: 30px;
                    .title {
                        span {
                            font-size: 50px;
                        }
                    }
                    .namezh {
                        padding: 9px 0 26px 0;
                        font-size: 15px;
                    }
                    .text {
                        font-size: 15px;
                    }
                }
                .banner {
                    width: 375px;
                    height: 193px;
                    background: url("@/assets/image/_img1.png") no-repeat;
                    background-position: center;
                    background-size: contain;
                }
            }
        }
    }

    .title {
        text-align: center;
        span {
            display: inline-block;
            font-weight: bold;
            font-size: 53px;
            color: #ffffff;
            background: linear-gradient(
                20.94952858212592deg,
                #0055ff 0%,
                #02c2a9 100%
            );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
        @media (max-width: 680px) {
            & {
                span {
                    font-size: 25px;
                }
            }
        }
    }
    .total {
        position: relative;
        padding: 0 20px;
        margin-top: 28px;
        display: flex;
        justify-content: space-between;
        z-index: 1;

        .cell {
            flex: 1;
            margin-right: 32px;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 42px 0;
            background: rgba(11, 15, 36, 1);
            border-radius: 8px;
            &:last-child {
                margin-right: 0;
            }
            .label {
                font-weight: 400;
                font-size: 22px;
                color: #84aeff;
            }
            .value {
                margin-top: 18px;
                font-weight: 500;
                font-size: 30px;
                color: #ffffff;
            }
        }
        @media (max-width: 680px) {
            & {
                padding: 0 20px;
                margin-top: 20px;
                display: flex;
                justify-content: space-between;

                .cell {
                    flex: 1;
                    margin-right: 10px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    padding: 20px 0;
                    text-align: center;
                    background: #1e2746;
                    border-radius: 4px;
                    &:last-child {
                        margin-right: 0;
                    }
                    .label {
                        font-weight: 400;
                        font-size: 12px;
                        color: #c1ccff;
                    }
                    .value {
                        margin-top: 9px;
                        font-weight: 500;
                        font-size: 14px;
                        color: #ffffff;
                    }
                }
            }
        }
    }
    .Energyleasing {
        padding: 100px 15px;
        background: rgba(11, 15, 36, 1);
        &.Energyleasing2 {
            margin-top: 0;
            background: transparent;
            .title {
                text-align: left;
            }
            .blcok {
                flex-direction: row-reverse;
            }
        }

        .blcok {
            margin-top: 60px;
            display: flex;
            justify-content: space-between;

            .icon {
                img {
                    width: 263px;
                    height: 290px;
                }
            }
            .info {
                max-width: 735px;
                .label {
                    max-width: 450px;
                    .cell {
                        margin-bottom: 40px;
                        display: flex;
                        align-items: center;
                        position: relative;
                        font-weight: 500;
                        font-size: 30px;
                        color: #ffffff;
                        &::before {
                            margin-right: 24px;
                            content: "";
                            display: block;
                            width: 12px;
                            height: 12px;
                            border-radius: 6px;
                        }
                        &:nth-child(1) {
                            &::before {
                                background: #ffcb24;
                            }
                        }
                        &:nth-child(2) {
                            &::before {
                                background: rgba(0, 85, 255, 1);
                            }
                        }
                        &:nth-child(3) {
                            &::before {
                                background: rgba(51, 255, 225, 1);
                            }
                        }
                    }
                }
                .text {
                    font-weight: 400;
                    font-size: 26px;
                    color: rgba(128, 153, 191, 1);
                    line-height: 52px;
                }
                .van-button {
                    margin-top: 70px;
                    max-width: 300px;
                    height: 70px;
                    font-size: 26px;
                    border-radius: 45px;
                }
            }
        }
        @media (max-width: 680px) {
            & {
                // margin-top: 30px;
                padding: 50px 15px;
                &.Energyleasing2 {
                    .title {
                        text-align: center;
                    }
                }
                .blcok {
                    margin-top: 30px;
                    flex-wrap: wrap;
                    .icon {
                        flex: 1;
                        text-align: center;
                        img {
                            width: 130px;
                            height: auto;
                            margin: 0 auto;
                        }
                    }
                    .info {
                        flex: 100% 0 0;
                        max-width: 100%;
                        width: 100%;
                        .label {
                            margin-top: 30px;
                            display: flex;
                            justify-content: space-between;
                            .cell {
                                margin-bottom: 20px;
                                font-size: 14px;
                                &::before {
                                    margin-right: 4px;
                                    width: 6px;
                                    height: 6px;
                                    border-radius: 6px;
                                }
                            }
                        }
                        .text {
                            font-size: 13px;
                            line-height: 24px;
                        }
                        .van-button {
                            margin: 30px auto 0 auto;
                            max-width: 150px;
                            height: 35px;
                            font-size: 16px;
                            border-radius: 22px;
                        }
                    }
                }
            }
        }
    }
    .How {
        padding: 100px 15px;
        background: rgba(11, 15, 36, 1);
        .row {
            margin-top: 60px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .cell {
                margin-bottom: 32px;
                flex: 45% 0 0;
                width: 45%;
                padding: 50px 24px 67px 24px;
                background: rgba(255, 255, 255, 0.08);
                border-radius: 20px;
                img {
                    width: 80px;
                    height: 80px;
                }
                .info {
                    padding: 22px 10px 0 10px;
                    .label {
                        font-weight: 400;
                        font-size: 24px;
                        color: #ffffff;
                    }
                    .text {
                        margin-top: 19px;
                        font-weight: 500;
                        font-size: 36px;
                        color: #ffffff;
                        line-height: 56px;
                    }
                }
            }
        }
        @media (max-width: 680px) {
            & {
                padding: 50px 15px;
                .row {
                    margin-top: 30px;
                    .cell {
                        display: flex;
                        align-items: center;
                        margin-bottom: 15px;
                        flex: 100% 0 0;
                        width: 100%;
                        padding: 20px 15px;
                        border-radius: 10px;
                        box-sizing: border-box;
                        img {
                            width: 50px;
                            height: 50px;
                        }
                        .info {
                            padding: 0 0 0 15px;
                            .label {
                                font-weight: 400;
                                font-size: 12px;
                                color: #ffffff;
                            }
                            .text {
                                margin-top: 8px;
                                font-size: 15px;
                                line-height: 22px;
                            }
                        }
                    }
                }
            }
        }
    }
    .tbk {
        padding: 100px 15px;
        .text {
            margin-top: 30px;
            font-weight: 400;
            font-size: 24px;
            color: #8099bf;
            line-height: 40px;
            text-align: center;
        }
        .image {
            position: relative;
            width: 700px;
            height: 470px;
            background: url("@/assets/image/_img16.png") no-repeat;
            background-position: center;
            background-size: cover;
            margin: 60px auto 0 auto;
            .p {
                position: absolute;
                font-weight: 500;
                font-size: 24px;
                color: #ffffff;
                min-width: 180px;

                &:nth-child(1) {
                    top: 117px;
                    right: 710px;
                    text-align: right;
                }
                &:nth-child(2) {
                    bottom: 115px;
                    right: 645px;
                    text-align: right;
                }
                &:nth-child(3) {
                    bottom: -40px;
                    left: 270px;
                }
                &:nth-child(4) {
                    bottom: 60px;
                    left: 630px;
                }
                &:nth-child(5) {
                    top: 116px;
                    left: 665px;
                }
            }
        }
        @media (max-width: 680px) {
            & {
                padding: 50px 15px;
                .text {
                    margin-top: 15px;
                    font-size: 12px;
                    line-height: 20px;
                }

                .image {
                    position: relative;
                    width: 218px;
                    height: 147px;
                    background: url("@/assets/image/_img16.png") no-repeat;
                    background-position: center;
                    background-size: cover;
                    margin: 30px auto 0 auto;
                    .p {
                        font-size: 13px;
                        min-width: 80px;
                        line-height: 16px;

                        &:nth-child(1) {
                            top: 34px;
                            right: 222px;
                        }
                        &:nth-child(2) {
                            bottom: 35px;
                            right: 202px;
                        }
                        &:nth-child(3) {
                            bottom: -21px;
                            left: 76px;
                        }
                        &:nth-child(4) {
                            bottom: 15px;
                            left: 202px;
                        }
                        &:nth-child(5) {
                            top: 34px;
                            left: 210px;
                        }
                    }
                }
            }
        }
    }
    .tbkModel {
        padding: 100px 15px;
        background: rgba(11, 15, 36, 1);
        .blcok {
            margin-top: 80px;
            display: flex;
            justify-content: space-between;
            flex-direction: row-reverse;

            .text {
                max-width: 580px;
                font-weight: 400;
                font-size: 26px;
                color: #8099bf;
                line-height: 52px;
            }
            .image {
                position: relative;
                width: 437px;
                height: 395px;
                background: url("@/assets/image/_img15.png") no-repeat;
                background-position: center;
                background-size: contain;
                p {
                    position: absolute;
                    font-weight: 500;
                    font-size: 24px;
                    color: #ffffff;
                    text-align: center;
                    span {
                        font-size: 17px;
                        opacity: 0.4;
                    }
                    &:nth-child(1) {
                        left: -70px;
                        top: 50px;
                    }
                    &:nth-child(2) {
                        left: -110px;
                        top: 202px;
                    }
                    &:nth-child(3) {
                        left: -2px;
                        bottom: -22px;
                    }
                    &:nth-child(4) {
                        right: -50px;
                        bottom: -6px;
                    }

                    &:nth-child(5) {
                        right: -60px;
                        top: 14px;
                    }
                }
            }
        }
        @media (max-width: 680px) {
            & {
                padding: 50px 15px;
                .blcok {
                    margin-top: 40px;
                    flex-wrap: wrap;
                    .text {
                        margin-top: 40px;
                        font-size: 13px;
                        line-height: 25px;
                    }
                    .image {
                        width: 220px;
                        height: 205px;
                        margin: 0 auto;
                        p {
                            position: absolute;
                            font-weight: 500;
                            font-size: 13px;
                            color: #ffffff;
                            text-align: center;
                            span {
                                font-size: 9px;
                            }
                            &:nth-child(1) {
                                left: -40px;
                                top: 27px;
                            }
                            &:nth-child(2) {
                                left: -58px;
                                top: 102px;
                            }
                            &:nth-child(3) {
                                left: -10px;
                                top: 190px;
                            }
                            &:nth-child(4) {
                                right: -32px;
                                bottom: -2px;
                            }
                            &:nth-child(5) {
                                right: -38px;
                                top: 9px;
                            }
                        }
                    }
                }
            }
        }
    }
    .map {
        padding: 100px 15px;
        ul {
            position: relative;
            margin-top: 50px;
            &::before {
                content: "";
                position: absolute;
                top: 8px;
                bottom: 0;
                border-left: 1px solid rgba(255, 255, 255, 0.2);
            }
            li {
                position: relative;
                margin-bottom: 30px;
                padding-left: 26px;
                &::before {
                    content: "";
                    position: absolute;
                    top: 12px;
                    left: -12px;
                    bottom: 0;
                    width: 24px;
                    height: 24px;
                    background: url("@/assets/image/_img17.png") no-repeat;
                    background-position: center;
                    background-size: cover;
                }
                .label {
                    position: relative;
                    display: inline-block;
                    padding: 11px 22px;
                    font-weight: 500;
                    font-size: 28px;
                    color: #ffffff;
                    background: linear-gradient(
                        90deg,
                        rgba(0, 85, 255, 1) 0%,
                        rgba(2, 194, 169, 1) 100%
                    );
                    border-radius: 8px;
                    &::before {
                        content: "";
                        position: absolute;
                        left: -12px;
                        top: 50%;
                        margin-top: -6px;
                        width: 0;
                        height: 0;
                        border-left: 12px solid transparent;
                        border-right: 12px solid transparent;
                        border-bottom: 12px solid rgba(0, 85, 255, 1);
                        transform: rotateZ(-90deg);
                    }
                }
                .text {
                    margin-bottom: 15px;
                    padding-left: 16px;
                    font-weight: 500;
                    font-size: 26px;
                    color: #8099bf;
                    line-height: 52px;

                    p {
                        margin-top: 16px;
                    }
                }
            }
        }
        @media (max-width: 680px) {
            & {
                padding: 50px 15px;
                ul {
                    margin-top: 30px;
                    &::before {
                        top: 8px;
                    }
                    li {
                        margin-bottom: 30px;
                        padding-left: 13px;
                        &::before {
                            top: 7px;
                            left: -6px;
                            bottom: 0;
                            width: 12px;
                            height: 12px;
                        }
                        .label {
                            padding: 6px 8px;
                            font-weight: 500;
                            font-size: 16px;
                            border-radius: 4px;
                            &::before {
                                left: -6px;
                                top: 50%;
                                margin-top: -3px;
                                border-left: 6px solid transparent;
                                border-right: 6px solid transparent;
                                border-bottom: 6px solid rgba(0, 85, 255, 1);
                            }
                        }
                        .text {
                            padding-left: 8px;
                            font-size: 14px;
                            line-height: 24px;

                            p {
                                margin-top: 8px;
                            }
                        }
                    }
                }
            }
        }
    }
    .Partners {
        ul {
            margin-top: 50px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            li {
                margin: 0 20px 20px 0;
                img {
                    width: 290px;
                }
            }
        }
        @media (max-width: 680px) {
            padding: 0 15px;
            ul {
                margin-top: 25px;
                justify-content: space-between;
                li {
                    margin: 0 0 20px 0;
                    img {
                        width: 165px;
                    }
                }
            }
        }
    }
}
</style>
